<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            display: none;
        }

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
        }
        .content {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin:auto ;
            width: 200px;
            height: 200px;
            padding: 30px;
            background-color: white ;
        }
    </style>
</head>
<body>

    <h3 class="noLogin">
        <a href="./04login.html">登录</a>
        <a href="./03reg.html">注册</a>
    </h3>

    <h3 class="login">xx</h3>

    <h4 class="loginOut">退出账号</h4>



    <table>

        <thead>
            <tr>
                <td>序号</td>
                <td>账号</td>
                <td>密码</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>zz</td>
                <td>123</td>
                <td>
                    <button class="del">删除</button>
                    <button class="changePwd">修改密码</button>
                </td>
            </tr> -->
        </tbody>

    </table>


    <div class="cover">
        <div class="content">
            <h4>修改密码</h4>
            用户名；<input type="text" class="username" disabled>
            <br>
            密码：<input type="password" class="newpwd">
            <br> <br>
            <button class="confirm" onclick="btnConfirm()">确定</button>
            <button class="cancel" onclick="btnCancel()">取消</button>
        </div>
    </div>


    <script src="../js/tools.js"></script>

    <script>

        // 判断是否登录  LOGIN_USER
        const res = getCookie('LOGIN_USER') ;
        if(res) {
            getEle('.login').style.display = 'block' ;
            getEle('.login').innerHTML = res ;
        } else {
            getEle('.noLogin').style.display = 'block' ;
        }


        // 退出账号
        // 分析：不仅仅是跳转到登录，而是需要把登录信息给删除
        getEle('.loginOut').addEventListener('click' , function() {
            // 先删除登录信息
            removeCookie('LOGIN_USER') ;
            // 再跳转到登录
            location.href = './04login.html' ;
        })


        // 显示列表

        // 获取了所有的数据
        let arr = getCookies() ;
        console.log(arr);

        // 筛选满足条件的数据
        arr = arr.filter( v => v.name.includes('YYDS_')) ;

        console.log(arr);


        // 注意：用户名中实际上没有YYDS_  
        //   使用replace  把  YYDS_  替换成''
        //   使用substr/substring/slice   5开始截取到后面所有

        let html = '' ;
        arr.forEach( (v , i) => {
            const {name , content} = v ;
            html += `
                <tr>
                    <td>${i + 1}</td>
                    <td>${name.replace('YYDS_' , '')}</td>
                    <td>${content}</td>
                    <td>
                        <button class="del" onclick="del('${name}' , this)">删除</button>
                        <button class="changePwd" onclick="changePwd('${name.replace('YYDS_' , '')}', this)">修改密码</button>
                    </td>
                </tr>
            `
        })

        getEle('tbody').innerHTML = html ;


        function del(name , obj) {
            // 删除cookie
            removeCookie(name) ;
            
            // 再删除DOM
            obj.parentNode.parentNode.remove() ;
        }


        const oCover = getEle('.cover') ;
        const oUname = getEle('.username') ;
        const oUpwd = getEle('.newpwd') ;

        let oldpwdTd ;    // 全局变量 , 找到存放新密码的位置

        // 修改密码
        function changePwd(name , that) {
            oCover.style.display = 'block' ;
            oUname.value = name ;
            oUpwd.focus() ;   // 让密码获取焦点
            oldpwdTd = that.parentNode.previousElementSibling ;  // 在点击修改密码的时候，要把旧密码存放的位置给找到
        }


        // 取消
        function btnCancel() {
            oCover.style.display = 'none' ;
        }

        function btnConfirm() {
            const newPwd = oUpwd.value ;
            const uname = oUname.value ;

            console.log(uname , newPwd);
            // 把新的密码存入数据
            setCookie('YYDS_' + uname , newPwd) ;
            
            oldpwdTd.innerHTML = newPwd ;
            oCover.style.display = 'none' ;
        }

    </script>
    
</body>
</html>